import React from 'react';
import { Redirect } from 'react-router-dom';
import { message } from 'antd';
import http from 'libs/http';
import './index.less';
import payOkImg from 'images/student/pay_ok.png';
const QRCode = require('qrcode.react');

class Cuotiben extends React.Component {
  state = {
    ecode: '',
    orderPayId: '',
    pay_suc: false,
    back_time: 3,
    back: false,
    orderPrice: 0, 
    courseName: '',
    redirect: '/student_center/free_classes/layout/pay',
  }

  //拉取二维码
  getPayCode = () => {
    const { orderId, orderPrice, courseName } = this.props.match.params;
    const { redirect } = this.state

    const paramsArr = window.location.hash.split('?') || []
    const paramsStr = paramsArr[1] || ''
    const _redirect = paramsStr.split('=')[1] || redirect

    const showErrorNotice = true
    http.post('/student/business/payNative', { orderId }, undefined, showErrorNotice).then(res => {
      this.setState({ ecode: res.data.url, orderPayId: res.data.orderPayId, orderPrice, courseName, redirect: _redirect });
    })
  }

  //返回倒计时
  startBack = () => {
    this.backTimer = setInterval(() => {
      const { back_time } = this.state;
      this.setState({
        back_time: back_time > 1 ? back_time -1 : 0,
        back: back_time < 2
      });
    }, 1000);
  }

  //检查支付状态
  checkPayStatus = () => {
    this.checkTimer = setInterval(() => {
      const { orderPayId } = this.state;
      if (orderPayId) {
        const showErrorNotice = true
        http.get('/student/weChat/getOrderPayInfo', { orderPayId }, undefined, showErrorNotice).then(res => {
          const status = res.data.status;
          const desc = res.data.desc;
          // 支付成功
          if (status === 2) {
            clearInterval(this.checkTimer);
            this.checkTimer = null;
            this.setState({ pay_suc: true });
            this.startBack();
          } else if (status === 3) {
            clearInterval(this.checkTimer);
            this.checkTimer = null;
            message.error(desc + '，请重新扫码');
            this.getPayCode();
          } else if (status === 1) {

          } else if (status === 4) {
            clearInterval(this.checkTimer);
            this.checkTimer = null;
            message.warn(desc);
            this.setState({ back: true });
          }
        })
      }
    }, 3000);
  }

  componentDidMount() {
    this.getPayCode();
    this.checkPayStatus();
  }

  componentWillUnmount() {
    clearInterval(this.backTimer);
    this.backTimer = null;
    clearInterval(this.checkTimer);
    this.checkTimer = null;
  }

  render() {
    const { ecode, pay_suc, back_time, back, orderPrice, courseName, redirect } = this.state;
    console.log(pay_suc)
    console.log(redirect)
    return (
      <div className="student-pay">
        {pay_suc ?
          <div className="pay-suc">
            <div className="suc-msg">
              <img src={payOkImg}/>
              <p className="text">您已支付成功！</p>
              <p className="time">{back_time}S自动返回我的课程</p>
            </div>
          </div>
          :
          <div className="pay-content">
            <div className="pay-title">{courseName} <span style={{ color: 'red' }}>¥{orderPrice}</span></div>
            <div className="pay-main">
              <div className="phone-pic" />
              <div className="ercode-box">
                <div className="ercode-title">
                  请使用微信扫一扫支付：
                  <span style={{ color: 'red' }}>¥{orderPrice}</span>
                </div>
                <div className="ercode">
                  {ecode && <QRCode size={160} value={ecode} />}
                </div>
                <div className="pay-tip" />
              </div>
            </div>
          </div>
        }
        {back && <Redirect to={redirect} />}
      </div>
    );
  }
}

export default Cuotiben;
